<template>
  <view class="container">
    <view class="info_box" v-for="(i, index) in list" :key="index">
      <!-- 没数据对接 -->
      <view class="info_title"> <text>{{ i.workOrderDetail.id }}</text>
        <text class="flag_box" v-if="i.isPay == 0">待缴费</text>
        <text class="flag_box" v-else style="border-color: #18bc37;color: #18bc37;">已缴费</text>
      </view>
      <view>
        <view class="info_content">
          <text> 收运时间 </text>
          <text> {{ i.time || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 收运司机 </text>
          <text> {{ i.driverName || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 有机质类型 </text>
          <text> {{ i.workOrderDetail.organicType || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 重量（吨） </text>
          <text> {{ i.workOrderDetail.actualWeight || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 收运费用 </text>
          <text> {{ i.workOrderDetail.transportationPrice || "-" }} </text>
        </view>
        <view class="info_content" style="padding-bottom: 20rpx">
          <text> 处理费用 </text>
          <text> {{ i.workOrderDetail.treatmentPrice || "-" }} </text>
        </view>
      </view>
    </view>
  </view>
  <!--<div class="container">
      <div style="height: 10px"></div>
      <view class="all">
        <!~~ 头部选项卡 ~~>
        <view class="head-nav">
          <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)"
            >全部订单</view
          >
          <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)"
            >待付款</view
          >
        </view>
        <!~~ 内容切换 ~~>
        <view class="content">
          <div class="card" v-for="item in list">
            <div style="height: 10px"></div>
            <div class="card-top">
              <div>收运司机：{{ item.driverName }} {{ item.phone }}</div>
              <div style="height: 5px;"></div>
              <div>收运时间：{{ item.time }}</div>
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-top: 20rpx;">
            <div class="items">
              <div style="font-weight: 500;">{{item.workOrderDetail.organicType}}：{{ item.workOrderDetail.actualWeight }}吨</div>
              <div style="height: 10rpx;"></div>
              <div style="display: flex;align-items: center;justify-content: space-between;">
                <div>{{item.workOrderDetail.organicType}}处理费用:{{ item.workOrderDetail.treatmentPrice||0 }}</div>
                <div>{{item.workOrderDetail.organicType}}收运费用:{{ item.workOrderDetail.transportationPrice||0 }}</div>
              </div>
            </div>
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <!~~ 缴费状态 ~~>
                <div style="display: flex;align-items: center;justify-content: space-between;width:90%;margin-left: 5%;font-size: 14px;">
                    <div>缴费状态：{{ item.isPay==0?'等待缴费':'您已完成缴费'}}</div>
                    <div class="pay">立即支付</div>
                </div>
            <div style="height: 15px"></div>
          </div>
          <div style="height: 20px;"></div>
        </view>
      </view>
    </div>-->
</template>
<script>
import { farmPaylist } from '../api/api.js';
export default {
  data() {
    return {
      navIndex: 0,
      list: [],
      index: 0
    };
  },
  methods: {
    checkIndex(index) {
      this.navIndex = index;
      this.index = index;
      console.log(index);
      this.getList();
    },
    getList() {
      farmPaylist().then(res => {
        console.log(res.data);
        this.list = res.data.data;
      })
    }
  },
  onShow() {
    this.getList();
  },
};
</script>
<style lang="scss">
.container {
  height: 100vh;
  width: 100vw;
  background: #f3f3f3;
  color: #000000;
  overflow-y: scroll;
}

.head-nav {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.activite {
  border-bottom: 2px solid #1a512c;
}

.card {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
  border-radius: 10px;
  background: #b9e2c7;

  .card-top {
    font-size: 14px;
    //   display: flex;
    //   align-items: center;
    //   justify-content: space-between;
    width: 90%;
    margin-left: 5%;
  }
}

.items {
  // display: flex;
  // align-items: center;
  width: 90%;
  margin-left: 5%;
  // justify-content: space-between;
  font-size: 14px;
}

.table {
  width: 90%;
  margin-left: 5%;
}

.status {
  color: #fff;
  background: #1b9c46;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.status1 {
  color: #1a512c;
  background: #91c5a3;
  width: 90%;
  margin-left: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 3px;
}

.pay {
  background: #5F9F6A;
  color: #fff;
  padding: 10rpx;
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 12px;
}

.container {
  min-height: 100vh;
  box-sizing: border-box;
  width: 100vw;
  padding: 20rpx;
  background: #f2f8f5;
  overflow-y: scroll;
}

.info_box {
  width: 100%;
  box-sizing: border-box;
  border-radius: 30rpx;
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 20rpx;

  .info_title {
    width: 100%;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #f2f2f2;
    font-size: 36rpx;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .flag_box {
      width: 120rpx;
      font-size: 28rpx;
      font-weight: normal;
      height: 60rpx;
      border-radius: 8rpx;
      background: #dffcec;
      color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .info_content {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
  }
}
</style>